@extends('layouts.app')
@section('content')
    <div class="container">
        <div class="wrapper">
            <div class="image" id="image_id" onmousemove="move(event)" onmousedown="down(event)" onmouseleave="leave(this)">
                <img id="img" src="/images/img.png" alt="">
                <div class="tag" id="tag_id">
                    <img width="50" src="/images/tag.png" alt="">
                </div>
            </div>
        </div>
        <div id="show"></div>
        <div id="show2"></div>
    </div>
@endsection
@section('style')
    <style type="text/css">
        .image {
            position: relative;
            cursor: move;
        }
        .tag {
            position: absolute;
            left: 0;
            top: 0;
            border: 1px dotted #fff;
        }
    </style>
@endsection
@section('script')
    <script>
        var image = document.getElementById('image_id');
        var tag = document.getElementById('tag_id');
        var img = document.getElementById('img');
        var show2 = document.getElementById('show2');
        var n = 1;

        function move(e) {
            var clientX = e.clientX;
            var clientY = e.clientY;
            var imageOffsetLeft = image.offsetLeft;
            var imageOffsetWidth = image.offsetWidth;
            var imageOffsetTop = image.offsetTop;
            var imageOffsetHeight = image.offsetHeight;
            var tagOffsetWidth = tag.offsetWidth;
            var tagOffsetHeight = tag.offsetHeight;
            var tagPositionX = clientX - imageOffsetLeft - tagOffsetWidth / 2;
            var tagPositionY = clientY - imageOffsetTop - tagOffsetHeight / 2;
            if (tagPositionX <= 0) {
                tagPositionX = 0;
            }
            if (tagPositionY <= 0) {
                tagPositionY = 0;
            }
            if (imageOffsetLeft + img.offsetWidth -clientX - tagOffsetWidth/2 <= 0) {
                tagPositionX = img.offsetWidth - tagOffsetWidth;
            }

            if (imageOffsetTop + img.offsetHeight - clientY - tagOffsetHeight/2 <= 0) {
                tagPositionY = img.offsetHeight - tagOffsetHeight;
            }
            var html = '鼠标水平坐标: ' + clientX + ' 鼠标垂直坐标:' + clientY + '<br>';
            html += '标签在图片中的水平坐标: ' + tagPositionX + ' 标签在图片中的垂直坐标: ' + tagPositionY + '<br>';
            html += imageOffsetLeft + img.offsetWidth - clientX - tagOffsetWidth/2 + '<br>';
            tag.style.left = tagPositionX + 'px';
            tag.style.top = tagPositionY + 'px';
            document.getElementById('show').innerHTML = html;
        }

        function down(e) {
            var clientX = e.clientX;
            var clientY = e.clientY;
            var imageOffsetLeft = image.offsetLeft;
            var imageOffsetWidth = image.offsetWidth;
            var imageOffsetTop = image.offsetTop;
            var imageOffsetHeight = image.offsetHeight;
            var tagOffsetWidth = tag.offsetWidth;
            var tagOffsetHeight = tag.offsetHeight;
            var tagPositionX = clientX - imageOffsetLeft - tagOffsetWidth / 2;
            var tagPositionY = clientY - imageOffsetTop - tagOffsetHeight / 2;
            var html = '<div style="position: absolute;left: '+ tagPositionX +'px;top: '+ tagPositionY +'px"><img width="50" src="/images/tag.png" alt=""></div>';
            image.appendChild(parseDom(html)[0]);
            var html2 = '<p>'+ n +': left: '+ tagPositionX +' top: '+ tagPositionY +'</p>';
            show2.appendChild(parseDom(html2)[0]);
            n++;
        }

        function parseDom(arg) {
            var objE = document.createElement("div");
            objE.innerHTML = arg;
            return objE.childNodes;
        }
        function leave(e) {
            console.log('leave');
        }
    </script>
@endsection